<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV+CSS作业练习</title>
    <style type="text/css">
        body, div, span, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, image, p, blockquote, th, td {margin: 0;
            padding: 0; line-height: 1.5px;}
        ul {list-style:none;}
        a{text-decoration: none;}
        li {display: list-item;text-align: -webkit-match-parent;}
}
        .clear{clear:both; width:100%; height:5px}
        #container{width:1487.2px; height:1070px; margin:10px;}

        #toolbar{width:100%; height: 40px;}
        #toolbar_box{width:1200px;height:40px;background-color: #ddd;display: block;margin: auto;}
        #toolbar_box ul li{/*nav li的样式*/
            width: 100px;
            float: left;
            line-height: 40px;/*行高*/
            margin-left: 40px;/*间距*/

        }
        #toolbar_box ul li a{/*a标签中的字体样式*/
            color:#000000;
            text-decoration: none;/*去除下划线*/
            line-height: 40px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            width: 100px;
            height: 40px;
            display: block;/*span和a标签不是块状标签，需要用display来块状显示*/
        }
        #toolbar_box ul li a:hover{
            color:blue;
            background-color: #FFF;
        }


        #nav{width: 100%; height: 40px; margin-top:10px;}
        #nav_box{width:1200px;height:40px;background-color: #FFC;display: block;margin: auto;}
        #nav_box ul li{/*nav li的样式*/
            width: 100px;
            float: left;
            line-height: 40px;/*行高*/
            margin-left: 40px;/*间距*/

        }
        #nav ul li a{/*a标签中的字体样式*/
            color:#000000;
            text-decoration: none;/*去除下划线*/
            line-height: 40px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            width: 100px;
            height: 40px;
            display: block;/*span和a标签不是块状标签，需要用display来块状显示*/
        }
        #nav ul li a:hover{color:blue;background-color: #FFF;}
        #main{width:1140px;height: 796px; display:block;margin:auto;}
        #left{width: 165px;height:400px;float:left;background-color: #ddd;margin-left: auto}

        ul.student {background: #f9f9f9;border: 1px solid #eee;}


        ul.student li.title{font-size: 14px;font-weight:bolder;text-indent: 15px;border-bottom: 1px solid #eee;}
        ul.student li{color: #333;
                    font-size: 14px;
                    height: 55px;
                    line-height: 55px;
                    text-indent: 40px;
                    position: relative;}
        ul.student li:hover{color:blue;background-color: #FFF;
        }

        ul.rights{background: #f9f9f9;border: 1px solid #eee;overflow: hidden;margin-top: 20px;}
        ul.rights li.title{width: 100%;font-size: 17px;font-weight: 600;height: 56px;padding: 5px 10px;line-height: 46px;}
        ul.rights li{width: 100%;float: left;text-align: left;padding: 10px 8px;}
        ul.rights li p{display: inline-block;float: left;font-size: 12px;line-height: 25px;padding-left: 8px;}

        #right{width: 900px;height:298px;float:right; padding-left: 25px;overflow: hidden;}
        #course_topnav{width: 100%;border-bottom: 1px solid #e2e2e2;margin-bottom: 15px; }
        #course_topnav li {display: inline-block;width: 80px;height: 45px;line-height: 45px;text-align: center;position: relative; margin: 0 15px;}

        #course_nav li{display: inline-block;min-width: 76px;padding: 0 10px;height: 35px;line-height: 35px;text-align: center;position: relative;}
        #course_list li{position: relative;padding: 20px 0 20px 10px;border-bottom: 1px solid #e2e2e2;}

        #right ul li a:hover{
            color:blue;
            background-color: #FFF;
        }



        #footer{width: 100%;min-width: 1200px;font-size: 14px;background-color: #fff;margin-top: 10px;overflow: hidden;border-top: 1px solid #f0f0f0;}
        .footer_box{width: 1150px;height:100px;overflow: hidden;margin: 15px auto 20px;background-color:#ddd;}
        .footer_box .footer_left{width:711px;height:112px;float: left;margin-right: 33.5px;overflow: hidden;background-color:red;}
        .footer_box .footer_right{position: relative;font-weight: 400;overflow: hidden;width: 223px;height:112px;margin-right: 25px; padding-bottom: 6px;padding-top: 0;float: right;background-color:green;}

    </style>
</head>
<body>
    <div id="container">
    <!--页眉开始-->
        <div id="toolbar"><!--id是唯一的，class是不唯一的标签-->
            <div id="toolbar_box">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">学院</a></li>
                </ul>
            </div>
        </div>
        <!--页眉结束-->


        <!--导航窗开始-->
        <div id="nav">
            <div id="nav_box">
                <ul>
                    <li><a href="#">视频课</a></li>
                    <li><a href="#">讲师</a></li>
                    <li><a href="#">直播</a></li>
                </ul>
            </div>
        </div>
        <!--导航窗结束-->
    <div class="clear"></div>
<!--主显示窗开始-->
    <div id="main">
    <!--左显示窗开始-->
        <div id="left">
            <ul class="student">
                <li class="title">我是学员</li>
                <li><a href="#">课程</a></li>
                <li><a href="#">红包</a></li>
                <li><a href="#">提问</a></li>
            </ul>
            <ul class="rights">
                <li class="title">会员特权</li>
                <li><p>精品课程每月免费兑</p></li>
                <li><p>精品课程每月免费兑</p></li>
                <li><p>购课低至9折</p></li>
            </ul>

        </div>
    <!--左显示窗结束-->

    <!--右显示窗开始-->
        <div id="right">
            <ul id="course_topnav">
                <li><a href="#">已购课程</a></li>
                <li><a href="#">最近播放</a></li>
                <li><a href="#">收藏</a></li>
            </ul>

            <ul id="course_nav">
                <li><a href="#">类型</a></li>
                <li><a href="#">全部</a></li>
                <li><a href="#">课程</a></li>
            </ul>

            <ul id="course_list">
                <li><a href="#">课程1</a></li>
                <li><a href="#">课程2</a></li>
                <li><a href="#">课程3</a></li>
            </ul>

        </div>
    <!--右显示窗结束-->
    </div>
<!--主显示窗结束-->

    <div class="clear"></div><!--浮动夹层-->

<!--页脚开始-->
    <div id="footer">
        <div class="footer_box">
            <div class="footer_right">

            </div>
            <div class="footer_left">

            </div>

        </div>

    </div>
<!--页脚结束-->
    </div>





</body>
</html>